<template>
  <div class="my-product">
    <h3>标题: {{ title }} </h3>
    <p>价格: {{ price }}元</p>
    <p>{{info}}</p>
    <button @click="kanFn">砍价</button>
  </div>
</template>

<script>
export default {
    props: ["index","title", "price", "info"],
    methods: {
      kanFn(){

      /**
         * 实现砍价功能思路
         * 当用户点击砍价按钮的时候，我们通知父组件，让父组件进行砍价
         * 涉及到几个知识点：
         *  1、通知父组件，如何通知呢？答：使用子传父技术
         * 父传子技术实现步骤
         * 1、子组件内：通过自定义事件传递数据给父组件
         *    如何自定义事件呢？答：vue提供了一个$emit方法自定义事件
         *    $emit语法：this.$emit(自定义事件名, 参数1，参数2)
         *    注意：第二个参数后面的所有参数都是传递给父组件的数据
         *  2、父组件内，通过v-on绑定自定义事件，并赋值为methods中定义的函数
         *            那么，我们就可以通过函数的参数接收子组件传入的数据
         *    注意：需要在使用myProduct标签上绑定事件
         */
        // this.price = this.price - 1;
        this.$emit("subprice", this.index, 1)
      }
    }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>